<template>
    <div class="left-tree-wrap flex flex-col">
        <a-input-search v-model:value="searchValue" style="margin-bottom: 8px" placeholder="输入名称查询" allow-clear @search="handleTreeSearch" v-if="!isMedical" />
        <div class="flex-1">
            <a-tree
                v-model:expandedKeys="expandedKeys"
                v-model:selectedKeys="selectedKeys"
                v-model:checkedKeys="checkedKeys"
                checkable
                :field-names="fieldNames"
                :tree-data="treeData"
                @check="handleTreeCheck"
            ></a-tree>
        </div>
    </div>
</template>

<script lang="ts">
    export default {
        name: 'LeftTree',
    };
</script>

<script lang="ts" setup>
    import { findTree } from 'xe-utils';
    import type { Ref, PropType } from 'vue';
    import { ref } from 'vue';
    import type { TreeProps } from 'ant-design-vue';
    import { toTreeArray } from 'xe-utils';
    import { queryProjectTree } from '@/api/list/project-list';
    import { getMedicalBuildTree } from '@/api/list/build';
    import { isArray, isEmpty } from 'lodash-es';

    const props = defineProps({
        pageType: {
            type: String as PropType<string>,
            default() {
                return '0';
            },
        },
        isMedical: {
            type: Boolean,
            default() {
                return false;
            },
        },
    });

    const emits = defineEmits(['update:selected', 'update:checked', 'update:checkedNodes', 'checked']);

    const treeData: Ref<TreeProps['treeData']> = ref([]);
    const fieldNames: TreeProps['fieldNames'] = {
        children: 'children',
        title: 'name',
        key: 'code',
    };
    const searchValue = ref<string>('');
    const expandedKeys = ref<string[]>([]);
    const selectedKeys = ref<string[]>([]);
    const checkedKeys = ref<string[]>([]);

    const handleTreeSearch = (value?: string) => {
        (props.isMedical ? getMedicalBuildTree() : queryProjectTree(value)).then(res => {
            if (!isEmpty(res.data)) {
                if (isArray(res.data)) {
                    treeData.value = res.data;
                    const [first] = res.data;
                    console.log('first', first);

                    expandedKeys.value = [first.code];
                    selectedKeys.value = [first.code];
                    checkedKeys.value = [first.code];
                } else {
                    treeData.value = [res.data as any];
                    if (props.pageType == '1') {
                        const { code } = res.data;
                        expandedKeys.value = [code];
                        selectedKeys.value = [code];
                        checkedKeys.value = [code];
                    } else {
                        const select = findTree([res.data], item => isEmpty(item.children));
                        expandedKeys.value = [select.item.code];
                        selectedKeys.value = [select.item.code];
                        checkedKeys.value = [select.item.code];
                    }
                }
                emits('update:selected', selectedKeys.value);
                handleTreeCheck(checkedKeys.value, { checked: true }, 1);
            }
        });
    };

    const handleTreeCheck = (
        checkedKeys,
        e: any,
        type,
        // e: { checked: boolean; checkedNodes; node; event },
    ) => {
        console.log(checkedKeys, e);
        if (checkedKeys.length === 1 && checkedKeys[0] === treeData.value[0].code) {
            checkedKeys.value = toTreeArray(treeData.value).map(item => item.code);
        } else {
            if (type == 1) {
                checkedKeys.value = checkedKeys;
            } else {
                checkedKeys.value = e.checkedNodes.filter(item => isEmpty(item.children)).map(item => item.code);
            }
        }
        emits('update:checked', checkedKeys.value, treeData);
        emits('checked', checkedKeys.value, treeData);
    };

    handleTreeSearch();
</script>

<style lang="less" scoped>
    .left-tree-wrap {
        height: 100%;
        width: 100%;
    }
</style>
